import React, { Component } from "react";
import { connect } from "react-redux";
import Button from "../../../component/button/index";
import { Picker, List, Toast, InputItem, Radio } from "antd-mobile";
import Notice from "@component/notice/notice";
import { openSelectAddress } from "../../../tools/native/navigate.js";
import "./index.scss";
const addressReg = /('|"|\\|%|&|<|>|(\\))/g;

const emojiReg = /(\ud83c[\udf00-\udfff]|\ud83d[\udc00-\ude4f]|\ud83d[\ude80-\udeff])/g;

/*********
  
    subCallBack(datas)  向外暴露的提交回调
    datas   props传入 数据


*********/
@connect(
	state => ({
		bonusStr: state.bankReducer.bonusStr,
		applyNo: state.getAppPlatformsDatas.applyNo,
		lnid: state.getAppPlatformsDatas.lnid,
		contactInfo: state.contactInfoReducer.contactInfo
	}),
	null,
	null,
	{
		forwardRef: true
	}
)
class xhfEditPersonalInfo extends Component {
	constructor(props) {
		super(props);
		this.state = {
			userAddressDetail: "",
			userAddress: "",
			provinceCode: "",
			province: "",
			cityCode: "",
			city: "",
			countyAreaCode: "",
			countyArea: "",
			longitude: "",
			latitude: "",
			isLoan: "",
			monthIncome: "",
			educateSituation: "",
			jobStatus: "",
			education: [
				{
					label: "硕士及以上",
					value: "05-硕士及以上"
				},
				{
					label: "本科",
					value: "04-本科"
				},
				{
					label: "大专",
					value: "03-大专"
				},
				{
					label: "高中",
					value: "02-高中"
				},
				{
					label: "中专",
					value: "01-中专"
				},
				{
					label: "初中及以下",
					value: "00-初中及以下"
				}
			],
			income: [
				{
					label: "1万以上",
					value: "03-1万以上"
				},
				{
					label: "6千—1万",
					value: "02-6千—1万"
				},
				{
					label: "5千—6千",
					value: "01-5千—6千"
				},
				{
					label: "2千以下",
					value: "00-2千以下"
				}
			],
			hasDebt: [
				{
					label: "有",
					value: "00"
				},
				{
					label: "没有",
					value: "01"
				}
			],
			job: [
				{
					label: "全职有薪",
					value: "00-全职有薪"
				},
				{
					label: "实习或兼职",
					value: "01-实习或兼职"
				},
				{
					label: "个体",
					value: "02-个体"
				},
				{
					label: "自由职业",
					value: "03-自由职业"
				}
				// {
				// 	label: "学生",
				// 	value: "04-学生"
				// }
			],
			isVisible: false,
			canSubmit: true,
			spaceID: "" // 随记生成一个计数
		};
	}
	next = () => {
		const {
			educateSituation,
			monthIncome,
			isLoan,
			userAddress,
			userAddressDetail,
			jobStatus,
			provinceCode,
			province,
			cityCode,
			city,
			countyAreaCode,
			countyArea,
			longitude,
			latitude
		} = this.state;
		const params = {
			educateSituation,
			monthIncome,
			isLoan,
			userAddress,
			userAddressDetail,
			jobStatus,
			provinceCode,
			province,
			cityCode,
			city,
			countyAreaCode,
			countyArea,
			longitude,
			latitude
		};
		this.checkData() && this.props.Submit(params);
	};
	componentDidMount() {
		if (window.YHAuthorize) {
			window.YHAuthorize.View.addEventListener(
				"KeyboardEvent",
				this.keyboardEvent,
				false
			);
		}
		let _tempRandom = Math.round(Math.random() * 1000000);
		this.setState({
			spaceID: _tempRandom
		});
	}
	componentWillUnmount() {
		if (window.YHAuthorize) {
			window.YHAuthorize.View.removeEventListener(
				"KeyboardEvent",
				this.keyboardEvent,
				false
			);
		}
	}
	keyboardEvent = obj => {
		let winHeight = document.documentElement.clientHeight;
		document.getElementById(`keybordb_${this.state.spaceID}`).style.height =
			winHeight * obj.heightper + "px";
		if (document.activeElement.getAttribute("id") !== "js-fix-bug") {
			document.activeElement.scrollIntoView();
		}
	};

	checkData = () => {
		const {
			educateSituation,
			monthIncome,
			isLoan,
			userAddress,
			userAddressDetail,
			jobStatus
		} = this.state;
		const { contactInfo } = this.props;
		if (!educateSituation) {
			Toast.info("请选择学历", 2);
			return false;
		}
		if (!monthIncome) {
			Toast.info("请选择月收入", 2);
			return false;
		}
		if (!isLoan) {
			Toast.info("请选择是否有信用卡或房贷", 2);
			return false;
		}
		if (!userAddress) {
			Toast.info("请选择现居地址", 2);
			return false;
		}
		if (!userAddressDetail) {
			Toast.info("请选填写具体街道门牌号", 2);
			return false;
		}
		if (!Object.keys(contactInfo).length) {
			Toast.info("请添加紧急联系人", 2);
			return false;
		}
		if (!jobStatus) {
			Toast.info("请选择就业状态", 2);
			return false;
		}
		return true;
	};
	//pickView 选择数据获取
	setValue = (type, key, value) => {
		key === "userAddressDetail" && (value = value.replace(addressReg, ""));
		key === "userAddressDetail" && (value = value.replace(emojiReg, ""));
		this.setState({
			[key]: type === "picker" ? value[0] : value
		});
	};
	openMap = () => {
		openSelectAddress().then(res => {
			if (res.status === "1000") {
				const {
					lat,
					lng,
					adcode,
					province,
					city,
					district,
					title,
					address
				} = res.data;
				this.setState({
					latitude: lat,
					longitude: lng,
					userAddress: title,
					userAddressDetail: address,
					province,
					city,
					countyArea: district,
					provinceCode: "", //String(adcode).slice(0, 2),
					cityCode: "", //String(adcode).slice(2, 4),
					countyAreaCode: "" //String(adcode).slice(4, 6)
				});
			} else {
				Toast.info(res.data.message, 5);
			}
		});
	};
	setFrom = data => {
		const {
			isLoan,
			userAddress,
			userAddressDetail,
			provinceCode,
			province,
			cityCode,
			city,
			countyAreaCode,
			countyArea,
			longitude,
			latitude
		} = data;
		const jobStatus = `${data.jobStatusCode}-${data.jobStatus}`;
		const educateSituation = `${data.educateSituationCode}-${data.educateSituation}`;
		const monthIncome = `${data.monthIncomeCode}-${data.monthIncome}`;
		data.form.setFieldsValue({
			educateSituation: [educateSituation],
			monthIncome: [monthIncome],
			jobStatus: [jobStatus]
		});
		this.setState({
			educateSituation,
			monthIncome,
			isLoan,
			userAddress,
			userAddressDetail,
			jobStatus,
			provinceCode,
			province,
			cityCode,
			city,
			countyAreaCode,
			countyArea,
			longitude,
			latitude
		});
	};
	render() {
		const {
			education,
			job,
			income,
			hasDebt,
			isLoan,
			userAddress,
			userAddressDetail
		} = this.state;
		const { getFieldProps } = this.props.data.form;
		const { contactInfo, bonusStr } = this.props;
		const hasEmergencyConact = Object.keys(contactInfo).length;
		return (
			<div>
				<div className="edit-person-info-wrapper">
					{bonusStr && <Notice noticeContent={bonusStr} />}
					<div className="progress-container">
						<p className="progress-title">
							已填写 <em>99%</em> 最高5万元信用额度
						</p>
						<div className="progress-bg">
							<span className="progress-line"></span>
						</div>
					</div>
					<div className="remind">
						<p className="remind-tip">
							请确保所填信息完整、真实有效、以便于快速审核
						</p>
					</div>

					<List className="person-info-list">
						<Picker
							extra="请选择学历"
							data={education}
							title=""
							cols={1}
							{...getFieldProps("educateSituation")}
							onOk={this.setValue.bind(this, "picker", "educateSituation")}
						>
							<List.Item arrow="horizontal">学历</List.Item>
						</Picker>
						<Picker
							extra="请选择月收入"
							data={income}
							title=""
							cols={1}
							{...getFieldProps("monthIncome")}
							onOk={this.setValue.bind(this, "picker", "monthIncome")}
						>
							<List.Item arrow="horizontal">收入</List.Item>
						</Picker>
						<List.Item
							className="long-list"
							extra={hasDebt.map(item => (
								<Radio
									key={item.value}
									checked={item.value === isLoan}
									className="my-radio"
									onChange={this.setValue.bind(
										this,
										"input",
										"isLoan",
										item.value
									)}
								>
									{item.label}
								</Radio>
							))}
						>
							是否有信用卡或房贷
						</List.Item>
					</List>

					<List className="person-info-list person-info-list-2">
						<List.Item
							extra={!userAddress ? "请选择现居地址" : userAddress}
							arrow="horizontal"
							onClick={this.openMap}
						>
							现居地址
						</List.Item>
						<InputItem
							maxLength="50"
							// autoHeight
							type="text"
							placeholder="请填写具体街道 门牌号"
							value={userAddressDetail}
							onChange={this.setValue.bind(this, "input", "userAddressDetail")}
						/>
						<List.Item
							extra={hasEmergencyConact ? "联系人信息" : "非紧急情况不会联系"}
							arrow="horizontal"
							onClick={this.props.jumpContact}
						>
							紧急联系人
						</List.Item>
						<Picker
							extra="请选择就业状态"
							data={job}
							title=""
							cols={1}
							{...getFieldProps("jobStatus")}
							onOk={this.setValue.bind(this, "picker", "jobStatus")}
						>
							<List.Item arrow="horizontal">就业状态</List.Item>
						</Picker>
					</List>

					<Button
						style={{
							marginTop: "0.2rem"
						}}
						buttonStyle={{
							height: "1rem",
							lineHeight: "1rem"
						}}
						onClick={this.next}
					>
						下一步
					</Button>
				</div>
				<div id={"keybordb_" + this.state.spaceID}></div>
			</div>
		);
	}
}

export default xhfEditPersonalInfo;
